HTML Audio & Video Tags
The HTML Audio <audio> and Video <video> tags embed sound and video content directly into webpages. With HTML5 multimedia, you no longer need plugins like Flash — modern browsers play media natively.
What are Audio & Video Tags?
<audio>embeds sound files on the page.<video>embeds video files on the page.- Both use
<source>for multiple format fallbacks. - Attributes like
controls,autoplay,loopcontrol playback.
Why Use Audio & Video?
Music & Podcasts
Add background music or embed podcasts.
Video Content
Stream tutorials, ads or movies.
No Plugins
HTML5 plays media natively — no Flash.
Easy Controls
Built-in play/pause/volume controls.
Cross-Device
Works on desktop, tablet and mobile.
Captions
Add <track> for subtitles and captions.
Audio & Video Syntax
- Audio:
<audio controls><source src="a.mp3" type="audio/mpeg"></audio> - Video:
<video controls width="400"><source src="v.mp4" type="video/mp4"></video> - Attributes:
controls,autoplay,loop,muted,poster - Multiple sources: Provide multiple
<source>tags for format fallback. - Captions:
<track kind="subtitles" src="en.vtt">
Audio & Video Example
<!DOCTYPE html>
<html>
<body>
<h3>Audio Example</h3>
<audio controls>
<source src="music.mp3" type="audio/mpeg">
<source src="music.ogg" type="audio/ogg">
Your browser does not support the audio element.
</audio>
<h3>Video Example</h3>
<video controls width="400" poster="thumb.jpg">
<source src="movie.mp4" type="video/mp4">
<source src="movie.webm" type="video/webm">
Your browser does not support the video tag.
</video>
</body>
</html>
Code Explanation
| HTML Part | Meaning |
|---|---|
| <audio> | Embeds audio content. |
| <video> | Embeds video content. |
| controls | Shows native player controls. |
| <source> | Provides multiple format options for browsers. |
| poster | Displays an image before the video plays. |
| autoplay / loop / muted | Optional playback behavior attributes. |
Multimedia Tags & Attributes
Use Cases
- Online courses: Embed lecture videos.
- Podcasts: Stream episodes in browser.
- Marketing: Hero background videos.
- Tutorials: Step-by-step video demonstrations.
Practice Questions
- Embed an audio file with
controlsattribute. - Embed a video with width 600 and a poster image.
- Provide two
<source>tags for browser compatibility. - Add subtitles using
<track>with a .vtt file.
Frequently Asked Questions
What formats are supported?
Audio: MP3, OGG, WAV. Video: MP4, WebM, OGG.
How can I show captions?
Add a <track> element with a .vtt file inside the <video> tag.
Why use multiple source tags?
Different browsers support different formats; multiple sources ensure compatibility.
Does autoplay work everywhere?
Most browsers block autoplay unless the video is muted.
Conclusion
HTML Audio and Video tags make rich multimedia experiences possible on the web — without plugins. Use proper source fallbacks, attributes and captions to deliver content that works for everyone, on every device.
Additional Tips
- Always add controls: Let users play and pause media.
- Use poster: Better visual before video starts.
- Provide fallbacks: Multiple source tags + fallback text.
- Optimize file size: Compressed videos load faster.